import main from "./index";
import { CopyTextToClipboard, Gete, Newe } from "./utils";

export default class {
  Title = "";
  Scale = 1;
  IsTest = false; // true: 编辑模式, false: 测试模式
  
  private inputFile: HTMLInputElement;
  Zoomin: HTMLButtonElement;
  Zoomout: HTMLButtonElement;
  private copyBtn: HTMLButtonElement;
  private saveBtn: HTMLButtonElement;
  private testBtn: HTMLButtonElement;
  private backBtn: HTMLButtonElement;
  CutBtn: HTMLButtonElement;
  PickBtn: HTMLButtonElement;
  ClearBtn: HTMLButtonElement;
  
  constructor() {
    this.Title = document.title;
    this.inputFile = Gete("inputFile") as HTMLInputElement;
    this.Zoomin = Gete("zoomin") as HTMLButtonElement;
    this.Zoomout = Gete("zoomout") as HTMLButtonElement;
    this.copyBtn = Gete("copy") as HTMLButtonElement;
    this.saveBtn = Gete("save") as HTMLButtonElement;
    this.testBtn = Gete("test") as HTMLButtonElement;
    this.backBtn = Gete("back") as HTMLButtonElement;
    this.CutBtn = Gete("cut") as HTMLButtonElement;
    this.PickBtn = Gete("pick") as HTMLButtonElement;
    this.ClearBtn = Gete("clear") as HTMLButtonElement;
    
    this.Zoomin.onclick = () => this.setScale(this.Scale + 1);
    this.Zoomout.onclick = () => this.setScale(this.Scale - 1);
    this.copyBtn.onclick = () => this.copy();
    this.saveBtn.onclick = () => this.save();
    this.testBtn.onclick = () => this.test();
    this.backBtn.onclick = () => this.back();
    this.CutBtn.onclick = () => main.Canvas.SwitchCut();
    this.PickBtn.onclick = () => main.Marker.AutoPick();
    this.ClearBtn.onclick = () => this.clear();
    
    this.inputFile.onchange = e => {
      const files: FileList = e.target["files"];
      const files2: File[] = []; // 过滤掉文件名重复的图片文件
      let runOnce = true;
      for (let i = 0; i < files.length; i += 1) {
        const file = files[i];
        const filename = file.name.split(".")[0];
        const fileIndex = main.FileList.FileNameData.indexOf(filename);
        if (fileIndex === -1) files2.push(file);
        else if (runOnce) {
          runOnce = false;
          main.FileList.SetCurrent(filename);
        }
      }
      for (let i = 0; i < files2.length; i += 1) {
        const file = files2[i];
        const reader = new FileReader();
        reader.onload = res => {
          const img = new Image();
          img.onload = () => {
            if (this.Scale < 4) this.Zoomin.disabled = false;
            this.CutBtn.disabled = main.Marker.Data.length > 0;
            const filename = file.name.split(".")[0];
            main.Canvas.ImageLoad(img, filename);
            main.FileList.Add(filename);
            if (i === files2.length - 1) {
              // 图片加载结束后的处理
              main.Marker.Refresh();
              main.ObjList.Update();
              main.Output.Update();
              main.Feedback.Update();
              const firstName = files2[0].name.split(".")[0];
              main.FileList.SetCurrent(firstName);
              setTimeout(() => main.Canvas.TotalColor(), 0);
            }
          };
          img.onerror = e => console.log("img.onerror", e.toString());
          img.src = res.target.result.toString();
        };
        reader.onerror = e => console.log("reader.onerror", e.toString());
        reader.readAsDataURL(file);
      }
    };
    this.inputFile.onerror = e => console.log("inputFile.onerror", e.toString());
  }
  
  private setScale(newScale: number) {
    let calc = newScale >= 4;
    this.Scale = calc ? 4 : newScale;
    this.Zoomin.disabled = calc;
    
    calc = newScale <= 1;
    this.Scale = calc ? 1 : newScale;
    this.Zoomout.disabled = calc;
    
    this.SetTitle();
    const { Scale } = this;
    main.Canvas.SetScale(Scale);
    main.Marker.SetScale(Scale);
  }
  
  SetTitle() {
    const { Title, Scale } = this;
    const { Canvas } = main;
    const t = Title + " " + Scale + "X";
    const w = Canvas ? Canvas.Width : 0;
    const h = Canvas ? Canvas.Height : 0;
    document.title = t + " " + w + "x" + h;
  }
  
  private copy() {
    const { value } = main.Feedback.Code;
    this.copyBtn.style.backgroundColor =
      CopyTextToClipboard(value) ? "limegreen" : "orangered";
    setTimeout(() => {
      this.copyBtn.style.transition = "background-color 0.2s ease-in";
      this.copyBtn.style.backgroundColor = "white";
    }, 0);
    setTimeout(() => {
      this.copyBtn.style.transition = "unset";
      this.copyBtn.style.backgroundColor = "";
    }, 200);
  }
  
  private save() {
    const { value } = main.Feedback.Code;
    const a = Newe({ type: "a" }) as HTMLAnchorElement;
    const blob = new Blob([value], { type : "application/json" });
    a.href = URL.createObjectURL(blob);
    a.download = "layer.json";
    a.click();
  }
  
  private test() {
    this.IsTest = true;
    this.switchMode();
  }
  
  private back() {
    this.IsTest = false;
    this.switchMode();
  }
  
  private switchMode() {
    const { IsTest } = this;
    this.inputFile.hidden = IsTest;
    this.ClearBtn.hidden = IsTest;
    this.CutBtn.hidden = IsTest;
    this.PickBtn.hidden = IsTest;
    this.testBtn.hidden = IsTest;
    this.copyBtn.hidden = IsTest;
    this.saveBtn.hidden = IsTest;
    this.backBtn.hidden = !IsTest;
    
    // 传达
    main.Canvas.SwitchMode();
    main.Output.SwitchMode();
    if (IsTest) main.ObjList.SwitchList(1);
  }
  
  SetBtnEnable(enable: boolean) {
    this.testBtn.disabled = !enable;
    this.copyBtn.disabled = !enable;
    this.saveBtn.disabled = !enable;
    this.ClearBtn.disabled = !enable;
    this.CutBtn.disabled = enable;
  }
  
  private clear() {
    this.SetBtnEnable(false);
    main.Marker.Clear();
    main.Canvas.TestCanvas.hidden = true;
    main.ObjList.Clear();
    main.Output.Update();
    main.Feedback.Update();
  }
};
